<template>
  <!--发布-->
  <div class="bookmarkBox">
    <div
      class="bookmark"
      v-for="item in myRelease"
      :key="item.pet_id"
      @click="handlePetDetails(item.pet_id)"
    >
      <ListItem :petList="item" />
    </div>
    <!--为空-->
    <Empty class="empty" v-if="myRelease.length <= 0" />
  </div>
</template>

<script>
import ListItem from "@/components/ListItem";
import { useRoute, useRouter } from "vue-router";
import { ref } from "vue";
import { gitMyrelease } from "@/api/home";
import Empty from "@/components/Empty";

export default {
  name: "DetailsBookmark",
  components: { Empty, ListItem },
  setup() {
    // console.log(11);
    const { myRelease, GitMyrelease } = handleGitMyrelease();
    GitMyrelease();
    //宠物详情跳转
    const router = useRouter();
    const handlePetDetails = (value) => {
      router.push(`/petTable/${value}`);
    };
    return {
      myRelease,
      handlePetDetails,
    };
  },
};
//获取发布
function handleGitMyrelease() {
  const route = useRoute();
  const myRelease = ref([]);
  const GitMyrelease = () => {
    gitMyrelease(route.params.id).then((res) => {
      // console.log(res);
      if (res.status == 200) {
        myRelease.value = res.data;
        // console.log(res.data[0].pet_images);
      }
    });
  };
  return { myRelease, GitMyrelease };
}
</script>

<style scoped lang="less">
.bookmarkBox {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
.bookmark {
  width: 44%;
  height: 12rem;
  margin: 0.3rem;
  border-radius: 0.5rem;
  overflow: hidden;
  box-shadow: 0px 1px 4px 0px #c98d61;
}
.empty {
  margin: 0;
}
</style>
